import React from 'react';
import Grid from '@mui/material/Grid2';
import { useSelector, useDispatch } from 'react-redux';
import { useParams, useLocation } from 'react-router-dom'
import Button from '@mui/material/Button';
import { Select } from 'antd';
import { Link } from 'react-router-dom'
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Typography from '@mui/material/Typography';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import MUILink from '@mui/material/Link';
import { putJobCategory, putPlayIndex, putPlayList } from '../redux/reducers'
import { setPlayIndex, updateJobCategory } from '../redux/actions'
import { GROUP_HAS_TARGET, GROUP_FIRST_ROUND } from '../contants'

const { Option } = Select;

function JobDetail(props) {
  const dispatch = useDispatch()
  const location = useLocation();
  const playList = useSelector(state => state.job.playList)
  const playIndex = useSelector(state => state.job.playIndex)
  const detailData = playList[playIndex];

  const handleTargetChange = (e, value) => {
    dispatch(putPlayList(playList.map((item, i) => {
      if (i == playIndex) {
        return {...item,
            targetGroup: value,
            group: GROUP_HAS_TARGET
          }
      } else {
        return item
      }
    })))


    window.electronAPI.updateJobCategory({
      lid: detailData.lid,
      params: {
        targetGroup: value,
        group: GROUP_HAS_TARGET
      }
    }, () => {})
    if (playIndex < playList.length - 1) {
      setTimeout(() => {
        dispatch(putPlayIndex(playIndex + 1))
      }, 1000)
      
    }
  }

  if (!detailData) {
    return <div>jobDetailFunction</div>
  }

  function handleClick(event) {
    // event.preventDefault();
    console.info('You clicked a breadcrumb.');
  }

  return (
    <div>
      <div role="presentation" onClick={handleClick}>
        <Breadcrumbs aria-label="breadcrumb">
          <MUILink underline="hover" color="inherit" href="/">
            职位列表
          </MUILink>
          <MUILink
            underline="hover"
            color="inherit"
            href="/jobList/firstRound"
          >
            已处理
          </MUILink>
          <Typography sx={{ color: 'text.primary' }}>标记分类</Typography>
        </Breadcrumbs>
      </div>
      <div style={{
        height: '100px',
        lineHeight: '100px',
        background:'#3b526a',
        'fontSize': '28px',
        'fontWeight': 600,
        color: '#fff',
        paddingLeft: '30px'
      }}>{detailData.brandName} | {detailData.jobName} <span style={{color: '#f26d49'}}>{detailData.salaryDesc}</span></div>
      <div>{location.pathname}</div>
      <Grid container spacing={2}>
        <Grid size={9}>
          <div className="content" style={{ background: 'white', height: '480px', marginTop: '15px', borderRadius: 10, padding: "20px 30px" }}>
            <div style={{ paddingBottom: '20px', fontSize: '22px', fontWeight: 'bold' }}>职位描述：</div>
            { detailData && detailData['detail'] && <div>{detailData['detail'].split('\n').map((text) => <div>{text}</div>)}</div> }
          </div>
          <div className="bottom" style={{ background: 'white',  marginTop: '15px' }}>
            <Grid container style={{height: '100px',}}>
              <Grid size={6}>
                <Grid container>
                  <Grid size={4}>分类：</Grid>
                  <Grid size={8}>
                    <ToggleButtonGroup
                      color="primary"
                      value={detailData.targetGroup}
                      exclusive
                      onChange={handleTargetChange}
                      aria-label="Platform"
                    >
                      <ToggleButton value="女装类">女装类</ToggleButton>
                      <ToggleButton value="食品类">食品类</ToggleButton>
                      <ToggleButton value="厨卫类">厨卫类</ToggleButton>
                      <ToggleButton value="新尝试">新尝试</ToggleButton>
                    </ToggleButtonGroup>                   
                  </Grid>
                </Grid>

              </Grid>
              <Grid size={6}>
              <Button
                  variant="contained"
                  disabled={playIndex == 0}
                  onClick={() => {
                    console.log('22222 next')
                    dispatch(putPlayIndex(playIndex - 1))
                  }}
                  style={{
                    backgroundColor: '#00bebd', color: '#fff', height: '100%', position: 'relative',
                    fontSize: '40px',
                    fontWeight: 800,
                    textAlign: 'center',
                    height: '100px',
                    lineHeight: '100px',
                    cursor: 'pointer',
                    color: '#fff', 
                    marginRight: '20px'
                }}
                >上一个</Button>

                <Button
                  variant="contained"
                  disabled={playIndex == playList.length - 1}
                  onClick={() => {
                    console.log('22222 next')
                    dispatch(putPlayIndex(playIndex + 1))
                  }}
                  style={{
                    backgroundColor: '#00bebd', color: '#fff', height: '100%', position: 'relative',
                    fontSize: '40px',
                    fontWeight: 800,
                    textAlign: 'center',
                    height: '100px',
                    lineHeight: '100px',
                    cursor: 'pointer',
                    color: '#fff'
                }}
                >下一个</Button>
              </Grid>
            </Grid>
          </div>
        </Grid>
        <Grid  size={3} style={{ background: 'white' }}>
   
        </Grid>
      </Grid>
    </div>
)

}

export default JobDetail
